<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"
            class="navBar"></van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="pageTop">
                <view class="cartAd">
                    <view class="cartAd_title">{{ navBarTitle }}</view>
                </view>
                <view style="" class="orderBox">
                    <view class="goodsPic"> <img
                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/coffee.png"
                            alt="" mode="widthFix"> </view>
                    <view class="pageTopRight">
                        <view class="orderCode">订单编号：<span style="color: #737373; font-size: 12px;"> {{ orderCode }}
                            </span></view>
                        <view class="orderCode">开票金额：￥<span style="color: #FF6203;">{{ orderMoney }}</span> </view>
                    </view>
                </view>

            </view>
            <view class="middle">
                <form @submit="formSubmitInvoice" @reset="formReset">
                    <view class="formItem">
                        <view class="formItemName">发票类型</view>
                        <view class="formItemContent text">普通发票-电子 <van-icon name="arrow" /> </view>
                    </view>
                    <!-- <van-cell title="发票类型" value="普通发票-电子" is-link></van-cell> -->
                    <view class="formItem">
                        <view class="formItemName">抬头类型</view>
                        <view class="formItemContent ">
                            <van-radio-group :value="invoiceInfo.type" @change="onChange">
                                <van-radio name="1" checked-color="#FF6203">个人或事业单位 </van-radio>
                                <van-radio name="0" checked-color="#FF6203" style="margin-left: 16rpx;">企业  </van-radio>
                            </van-radio-group>
                        </view>
                    </view>
                    <van-cell-group :border="false">
                        <van-field :value="invoiceInfo.taxId" label="发票抬头" placeholder="填写需要开发票的企业" input-align="right" :border="false" is-link />
                        <template v-if="isShowContent && invoiceInfo.type=='0'">
                            <van-field :value="invoiceInfo.taxId" label="税号" placeholder="纳税人识别号" input-align="right" :border="false" label-class="color:red" placeholder-style="font-size:24rpx;color:#888888;"/>
                            <van-field :value="invoiceInfo.bankName" label="开户银行" placeholder="选填" input-align="right" :border="false" placeholder-style="font-size:24rpx;color:#888888;"/>
                            <van-field :value="invoiceInfo.bankAccount" label="银行账号" placeholder="选填" input-align="right" :border="false" placeholder-style="font-size:24rpx;color:#888888;"/>
                            <van-field :value="invoiceInfo.businessAddress" label="企业地址" placeholder="选填" input-align="right" :border="false" placeholder-style="font-size:24rpx;color:#888888;"/>
                            <van-field :value="invoiceInfo.businessTel" label="企业电话" placeholder="选填" input-align="right" :border="false" placeholder-style="font-size:24rpx;color:#888888;"/>
                        </template>
                    </van-cell-group>
                    <view style="text-align: center;" v-if="invoiceInfo.type=='0'"><van-icon :name="isShowContent ? 'arrow-up' : 'arrow-down'" @click="showCotent"/></view>
                    <view class="tips">
                        <view class="tipsLeft">发票内容</view>
                        <view class="tipsRight">
                            <van-radio-group :value="invoiceInfo.invoiceContent" @change="onInvoiceContentChange">
                                <van-radio name="detail" checked-color="#ff6203">明细</van-radio>
                                <van-radio name="summary" checked-color="#ff6203" style="margin-left: 16rpx;">汇总</van-radio>
                            </van-radio-group>
                        </view>

                    </view>
                    <!-- <view class="formItem"> -->
                    <!-- <view class="formItemName">开票成功通知</view>
                            <view class="formItemContent ">
                                <radio />
                            </view> -->
                    <!-- </view> -->
                    <!-- <view style="font-size: 24rpx;color: #888888;margin-top: 20rpx;"> 电子发票开具成功后，可以通过【乐生活-消息-服务消息提醒】提醒您发票详情</view> -->

                    <van-cell title="开票成功通知" label="电子发票开具成功后，可以通过【乐生活-消息-服务消息提醒】提醒您发票详情" 
                        :border="false" checked-color="#FF6203">
                        <van-radio-group  @change="onClick" slot="right-icon" :value="radio">
                            <van-radio  :name="1" @change="onClick" checked-color="#FF6203"/>
                        </van-radio-group>
                        <!-- <van-radio slot="right-icon" :name="isNoticeEnabled ? 1 : 0 " @change="onClick"/> -->
                    </van-cell>
                </form>
            </view>
        </scroll-view>
        <van-goods-action>
            <van-goods-action-button plain color="#111111" text="取消申请" form-type="reset" @click="formReset" />
            <van-goods-action-button color="#FF6203" text="提交申请" type="warning" form-type="submit"
                @click="formSubmitInvoice" />
        </van-goods-action>
    </view>
</template>
<script>

export default {

    components: { },

    data () {
        return {
            showlogisticsPopup: false,
            navBarTitle: '申请开票',
            scrolling: false,
            orderCode: 'LJL2575773737',
            orderMoney:200,
            num: 2,
            invoiceInfo: {
                title: '',
                type:'1',
                taxId: '',
                bankName:'',
                bankAccount:'',
                businessAddress:'',
                businessTel:'',
                isNotice:'',
                invoiceContent: 'detail', // 新增：发票内容选项
                isNoticeEnabled: false, // 新增：通知的开启或关闭状态
            },
            showAll:true,
            isNoticeEnabled: false, 
            isShowContent:false,  //是否显示内容
            radio:0, //开启通知
 

        }
    },

    computed: {},

    watch: {},
    onLoad () {},
    onReady () {
    },

    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },

        // 内容展开 折叠
        showCotent(){
            this.isShowContent=!this.isShowContent
        },
        // onChange
        onChange(e){
            console.log(e,e.detail,'个人+企业')
            this.invoiceInfo.type=e.detail
        },
        // 开启通知
        onClick(e){
            console.log(e,'开启通知')
             // 切换通知的开启或关闭状态
             this.isNoticeEnabled =!this.isNoticeEnabled;
             this.radio=e.detail
        },
        // 发票内容改变
        onInvoiceContentChange(e) {
            this.invoiceInfo.invoiceContent = e.detail;
        },
        // 验证发票信息
        validateInvoiceInfo() {
            const { title, taxId, radio } = this.invoiceInfo;
            if (radio === 'radio2' && title === '') {
                Toast.fail('企业抬头不能为空');
                return false;
            }
            if (radio === 'radio2' && taxId === '') {
                Toast.fail('纳税人识别号不能为空');
                return false;
            }
            return true;
        },
        formSubmitInvoice() {
            // 在这里处理发票信息的提交逻辑
            console.log(this.invoiceInfo);
            // 调用后端 API 发送发票信息
            if (!this.validateInvoiceInfo()) return;
            this.sendInvoiceRequest(this.invoiceInfo);
        },
        sendInvoiceRequest(invoiceData) {
            // 这里使用微信小程序的请求 API 发送数据，例如使用 wx.request
            wx.request({
                url: 'https://your-api-endpoint.com/invoice',
                method: 'POST',
                data: invoiceData,
                success: (res) => {
                console.log('发票信息提交成功', res);
                this.showInvoice = false;
                wx.showToast({
                    title: '发票申请已提交',
                    icon:'success'
                });
                },
                fail: (err) => {
                console.error('发票信息提交失败', err);
                wx.showToast({
                    title: '发票申请失败，请重试',
                    icon: 'none'
                });
                }
            });
        },
        formReset(e) {
            console.log('form发生了submit事件，携带数据为：', e.detail.value)
            Toast.success('编辑地址成功')
            
        },

    }

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    overflow:hidden;
    box-sizing: border-box;
    height:100vh;
}
.scroll-content {
    flex: 1;
    height: 1px;
}

.pageTop{
    // display: flex;
    // flex-direction: column;
    background-color: #f9f9f9;
    padding-bottom: 3px;
}

 // 页面标题部分
 .cartAd {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 24px 21px 24px ;

}

.cartAd_title {
    font-size: 30px;
    text-align: left;
    line-height: 30px;
    color: #111111;
}
.orderBox{
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 23px 24px 21px 24px ;
}

.goodsPic{
    width: 15%;
    img{
        width: 100%;
        height: auto;
    }
}
.pageTopRight{
    margin-left:15px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.orderCode{
    color: #111111;
    font-size: 13px;
}

.middle{
    padding:24px 24px 120px 24px;
}
.formItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    line-height: 88rpx;
}
.formItemName{
    color: #111111;
    font-size: 14px;
}
.formItemContent{
    font-size: 12px;
}
.text{
    color:#111111;
}

.tips{
    border-radius: 4rpx;
    background: #f9f9f9;
    padding: 16rpx 18rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #111111;
    margin-bottom: 20rpx;
    margin-top: 36rpx;
}
::v-deep .van-radio-group{
    display: flex !important;
    align-items: center;
}
/* 底部按钮 顶部的横线 */
::v-deep .van-goods-action, .van-goods-action--safe{
    border-top: 1px solid #f9f9f9 !important;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep.navBar .van-icon {
    color: #242629 !important;
}

::v-deep .orderCode .van-icon-arrow{
    color:#FF6203 !important ;
}

::v-deep .van-cell{
    padding-left: 0px;
    padding-right: 0px;
    border: none !important;    
    display: flex;
    align-items: center !important;
}
::v-deep .van-cell__value{
    font-size: 24rpx;
    color: #888888;
}
::v-deep .van-cell__title{
    font-size: 28rpx;
    color: #111111;
}
::v-deep .van-cell--hover .hover-class{
    border: none !important;
}
::v-deep .van-button--danger, .van-button--normal, .van-goods-action-button__inner {
    font-weight: normal !important;
}
::v-deep .van-button--warning, .van-button--normal{
    font-weight: normal !important;
}
.b30{
    margin-bottom: 30px;
}
::v-deep  .van-field__label{
    font-size: 28rpx;
    color: #111111 !important;
    line-height: 28rpx !important;
}
</style>
